<template>
	<view class="index">
		<view class="profile-info uni-flex uni-column" style="justify-content: center; text-align: center; align-items: center;">
			
			<view v-if="userInfo.nickname !== undefined">
				<image src="../../../static/image/my/setting.png" class="setting-field" @tap="goToSetting()"></image>
				<!-- {{userInfo.imgUrl}} -->
				<image class="avatar" :src="baseUrl+ userInfo.imgUrl" > </image>
				<!-- <image class="avatar" src="../../../static/image/my/ic_menu_me_pressed.png"></image> -->
				<view class="info">
					<text class="name">{{userInfo.nickname}}</text>
				</view>
			</view>
			
			<view  v-else  @click="goLogin">
				<image class="icon"  src="../../../static/image/my/ic_menu_me_pressed.png" > </image>
				<view  @click="goLogin" class="uni-text-white">点击登录</view>
			</view>
		</view>

		<view>
			<view class="uni-card">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key) in arrayPages1" :key="key" @click="goTo(item)">
						<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
							<image class="uni-media-list-logo" :src="item.imgUrl"></image>
							<view class="uni-media-list-body">

								{{item.text}}

							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-card">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key2) in arrayPages2" :key="key2"
					 @click="goTo(item)">
						<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
							<image class="uni-media-list-logo" :src="item.imgUrl"></image>
							<view class="uni-media-list-body">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-card">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,key3) in arrayPages3" :key="key3"
					 @click="goTo(item)">
						<view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">

							<image class="uni-media-list-logo" :src="item.imgUrl"></image>
							<view class="uni-media-list-body">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getStore} from '@/common/util'
	import {getUrl} from '@/common/oss'
	import {
		mapGetters,mapState 
	} from 'vuex'
	export default {
		data() {
			return {
				isLogin: false,
				arrayPages1: [{
						text: '订单',
						imgUrl: '/static/image/my/order.png',
						navigatePage: '/pages/buy/list'
					},
					{
						text: '礼物',
						imgUrl: '/static/image/my/gift.png',
						navigatePage: '/pages/my/mygift'
					},
					{
						text: '钱包',
						imgUrl: '/static/image/recharge.png',
						navigatePage: '/pages/my/wallet'
					},
				],
				arrayPages2: [
// 					{
// 						text: '足迹',
// 						imgUrl: '/static/image/my/jifen.png',
// 						navigatePage: '/pages/my/gift'
// 					},
					{
						text: '收藏',
						imgUrl: '/static/image/my/collect.png',
						navigatePage: '/pages/my/collect'
					},
					{
						text: '相册',
						imgUrl: '/static/image/my/picture.png',
						navigatePage: '/pages/my/gallerys'
					}
				],
				arrayPages3: [

					{
						text: '收货地址',
						imgUrl: '/static/image/my/address.png',
						navigatePage: '/pages/my/address?typeId=update'
					},
					{
						text: '意见反馈',
						imgUrl: '/static/image/my/suggest.png',
						navigatePage: '/platforms/app-plus/feedback/feedback'
					},

					{
						text: '设置',
						imgUrl: '/static/image/my/setting.png',
						navigatePage: '/pages/my/setting'
					}
				],
				baseUrl: ""
			}
		},
		onLoad: function() {
			this.baseUrl = getUrl();
		},
		onShow: function() {
//			console.log(this.hasLogin)
		},
		computed: {
			...mapGetters(
				["hasLogin"],
			),
			...mapState({
			  userInfo: state => state.user.userInfo
			}),
		},
		mounted(){  
			this.isLogin  = this.hasLogin
    },
		methods: {
			goToSetting () {
				uni.navigateTo({
					url:"/pages/my/setting"
				})
			},
			gotoProfile() {
				uni.navigateTo({
					url: "/pages/my/profile"
				})
			},
			// 点击登陆
			goLogin:function() {
				uni.navigateTo({
					url:"/pages/security/login"
				})
			},
			goTo: function(e) {
				if(this.hasLogin) {
					var page = e.navigatePage+"?partyId="+this.userInfo.partyId
					uni.navigateTo({
						url: page
					});
				} else {
					uni.navigateTo({
						url: "/pages/security/login"
					})
				}

			}
		}
	}
</script>

<style>
	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
	}
	.profile-info {
		width:  750upx;
		height: 420upx;
		background: #7C4BF9;
	}

	.icon {
		margin-top: 180upx;
		height: 100upx;
		width: 100upx;
	}


	.profile-info .avatar {
		/* margin-top: 100upx; */
		height: 148upx;
		width: 148upx;
		border-radius: 50%;
	}

	.profile-info .info {
		flex: 1;
		height: 50upx;
	}

	.profile-info .name {
		display: block;
		height: 45upx;
		line-height: 45upx;
		color: #fff;
		font-size: 37.5upx;
		margin-bottom: 10upx;
	}

	.profile-info .level {
		display: block;
		height: 30upx;
		line-height: 30upx;
		margin-bottom: 10upx;
		color: #7f7f7f;
		font-size: 30upx;
	}

	.uni-media-list-logo {
		width: 50upx;
		height: 50upx;
	}

	.uni-media-list-body {
		width: 50upx;
		height: 50upx;
		font-size: 28upx;
	}
	
	.setting-field {
		margin-top: 80upx;
		height: 60upx;
		width: 60upx;
		margin-left: 650upx;
	}
</style>
